<template>
  <div class="login-box">
    <div class="box">
      <img class="bg" :src="ban4">
      <div class="container">
        <div class="little-box">
          <div class="cont">
            <el-form ref="form" label-width="70px">
            <el-form-item label="手机号码">
              <el-input v-model="tel"></el-input>
            </el-form-item>
            <el-form-item label="登录密码">
              <el-input v-model="pwd" type="password"></el-input>
            </el-form-item>
            <div class="item" style="text-align: center;">
              <el-button type="success" @click="login()">立即登录</el-button>
            </div>
            <div class="item">
              <router-link class="forget" to="/forget">忘记密码</router-link>
              <router-link class="reg" to="/reg" style="float: right;">注册</router-link>

            </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store'
import ban4 from '@/assets/image/ban4.jpg';
import qs from "qs"
export default {
  name: 'App',
  data(){
    return{
      ban4,
      tel:'',
      pwd:''
    }
  },
  store,
  methods:{
    login:function(){
      console.log(this.tel,this.pwd)
      this.$http.post("/index.php/index/user/login",qs.stringify({
          mobile:this.tel,
          password:this.pwd
      }))
      .then(res => {
        // console.log(this.$store.state.dlzt)
        // console.log(res.data)
        
        // this.$store.state.dlzt = res.data.code;
        if(res.data.code==-1){
          this.$alert(res.data.message, '错误了哦~', {
            confirmButtonText: '确定'
          });
        }else if(res.data.code==-2){
          this.$alert(res.data.message, '错误了哦~', {
            confirmButtonText: '确定'
          });
        }else if(res.data.code==1){
          console.log(res)
          this.$router.push({ path: '/' });
          this.$store.state.dlzt = res.data.code;
          this.$store.state.username=res.data.user_name;
          this.$store.state.userid=res.data.user_id;
          localStorage.name = res.data.user_name
          localStorage.dlzt = res.data.code
          localStorage.userid = res.data.user_id
          // console.log(localStorage.name)
        }
        // console.log(this.$store.state.dlzt,this.$store.state.userid)
      })
      .catch(error => {
        alert(网络错误)
      });
    }
  },
  created(){
    
  },
  components:{
    
  },
  watch:{
          '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                if(to.name == 'login'){
                  this.tel=''
                  this.pwd=''
                }
              }
        }
}
</script>

<style scoped lang="less">
.login-box{
  width: 100%;
  height: auto;
  zoom: 1;
  overflow: hidden;
  .box{
    width: 100%;
    height: 868px;
    position: relative;
  }
  .bg{
    width: 100%;
    height: 868px;
    position: absolute;
    z-index: -1;
  }
  .little-box{
    float: right;
    width: 480px;
    height: auto;
    zoom: 1;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    margin-top: 110px;
    .cont{
      padding: 30px;
      .item{
        width: 100%;
        height: auto;
        zoom: 1;
        overflow: hidden; 
        a{
          padding-top: 16px;
          float: left;
          font-size: 14px;
          color: #494949;
        }
        .reg{
          float: right;
        }
      }
    }
  }
}
</style>
